<template>
  <div>
    <el-row>
      <el-page-header @back="goBack"></el-page-header>
    </el-row>
    <el-row style="margin-top: 30px">
      <el-col :span="3">
        <el-button type="primary"
                   size="small" icon="el-icon-s-order" round @click="allDown">打包下载
        </el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px">
      <el-col :span="2">
        <div style="font-size: 14px;color: #a5a5a5">全部作业</div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <el-table
        :data="tableData"
        empty-text="暂无学生提交作业"
        style="width: 100%;">
        <el-table-column
          align="center"
          prop="username"
          label="学生学号"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="学生姓名"
          width="200">
        </el-table-column>
        <el-table-column
          label="提交时间"
          width="250"
          align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.submitTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="是否批阅"
          width="200">
          <template slot-scope="scope">
            <i class="el-icon-view"></i>
            <span style="margin-left: 10px">{{ scope.row.submitStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="downWork(scope.row)">下载作业
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="review(scope.row)">作业评分
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MarkingWork',
  data () {
    return {
      courseId: undefined,
      tableData: [],
      ids: [],
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    review (row) {
      this.$prompt('请输入分数', '作业评分', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /0$|[1-9]\d?$|100$/,
        inputErrorMessage: '请输入[0,100]内的数'
      }).then(({ value }) => {
        this.$http.post('/api/workSubmit/score', {
          submitId: row.submitId,
          submitGrade: value
        }).then((res) => {
          if (res.data.code === 2000) {
            this.$notify({
              title: '作业评分',
              type: 'success',
              message: '已完成作业评分',
              duration: 2000
            })
            this.init()
          } else {
            this.$notify({
              title: '作业评分',
              type: 'error',
              message: '作业评分失败！',
              duration: 2000
            })
          }
        })
      })
    },
    allDown () {
      //先请求使后台先生成压缩包再下载
      this.$http({
        url: '/api/common/pack',
        method: 'post',
        data: {
          ids: this.ids
        }
      }).then(res => {
        window.location.href = 'http://localhost/common/download/submits?file=' + res.data
      })
    },
    downWork (row) {
      window.location.href = 'http://localhost/common/download/submit/' + row.submitId
    },
    init () {
      this.$http.post('/api/workSubmit/recordList', {
        ids: this.ids
      }).then((res) => {
        this.tableData = res.data.result
      })
    },
  },
  created () {
    this.courseId = this.$store.state.course.courseId
    this.ids = this.$store.state.workIds
    console.log(this.ids)

    this.init()
  }
}
</script>

<style scoped>

</style>
